<template>
	<view class="page">
		<view class="order">
			<view class="orderMsg">
				<view class="item flexSpace">
					<view class="label">{{$t('contract.contractName')}}：</view>
					<view>{{detailList.product_title}}</view>
				</view>
				<view class="item flexSpace">
					<view class="label">{{$t('info.order')}}：</view>
					<view>{{detailList.order_id}}</view>
				</view>
				<view class="item flexSpace">
					<view class="label">{{$t('electFees.unitPower')}}：</view>
					<view>{{detailList.once_consume?Number(detailList.once_consume):'0'}} kw/h</view>
				</view>
				<view class="item flexSpace">
					<view class="label">{{$t('info.number')}}：</view>
					<view>{{detailList.buy_shares}}</view>
				</view>
				<view class="item flexSpace">
					<view class="label">{{$t('order.time')}}：</view>
					<view>{{detailList.created_at}}</view>
				</view>
				<view class="item flexSpace">
					<view class="label">{{$t('expiration.time')}}：</view>
					<view>{{detailList.product_expires_at}}</view>
				</view>
			</view>
			<view class="orderFees">
				<view class="item flexSpace">
					<view class="label">{{$t('electFees.price')}}</view>
					<view class="text">{{Number(detailList.unit_price)}} USDT</view>
				</view>
				<view class="item flexSpace">
					<view class="label">{{$t('electFees.month')}}</view>
					<hb-number-box v-model="month" :min-number="minNumber" :max-number="maxNumber"></hb-number-box>
				</view>
				<view class="item flexSpace">
					<view class="label">{{$t('electFees.time')}}</view>
					<view>{{lastDate}}</view>
				</view>
				<view class="item flexSpace">
					<view class="label"></view>
					<view class="total">
						{{$t('contract.amount')}}：
						<text class="text">{{electFeesAmount}} {{detailList.payCoin}}</text>
					</view>
				</view>
			</view>
			<view class="fixedBtm">
				<view class="content flexSpace">
					<view class="left">
						<view class="black">{{$t('electFees.all')}}{{detailList.buy_shares}}{{$t('electFees.allTips')}},
						</view>
						<view class="gray">{{$t('electFees.actual')}}：</view>
						<view class="price">
							{{electFeesAmount}}USDT
						</view>
					</view>
					<view class="btn" @click="submit">{{$t('confirmOrder')}}</view>
				</view>
			</view>
			<view class="pop" v-if="isShow">
				<view class="content">
					<view class="title">
						{{$t('payOrder')}}
						<view class="close" @click="isShow = !isShow"> <img src="@/static/home/close.png" alt="">
						</view>
					</view>
					<view class="pay">
						<text class="pay-title">{{$t('pay.way')}}</text>
						<radio-group>
							<label class="pay-item">
								<view class="label-wrap">
									<image src="@/static/contract/USDTB.png" mode=""></image>
									<text class="iconfont usdt icon-USDT"></text>
									<text class="label">
										USDT{{$t('pay')}}({{$t('pay.balance')}}{{wallet.data ? Number(wallet.data['USDT'].balance_available ): 0}}USDT)</text>
								</view>
								<radio class="radio" color="#E3892A" checked='1' value="1" />
							</label>
						</radio-group>
					</view>
					<hb-input v-model="secondary_password" type="password" :placeholder="placeholder[0]"></hb-input>
					<view class="buttonBg" @click="onOrderPay" :loading="loading">{{$t('pay.confirm')}}</view>
					<view class="amountp">
						{{$t('pay.amount')}}：{{electFeesAmount}} USDT
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import HbNumberBox from "@/components/hb-number-box.vue"
	import getDateTime from '@/plugin/getDateTime.js'
	import {
		electDetail,
		electPay
	} from '@/api/electFees.js'
	import HbInput from "../contract/components/hb-input.vue";
	import {
		mapState
	} from 'vuex'
	export default {
		name: "order",
		components: {
			HbNumberBox,
			HbInput
		},
		data() {
			return {
				detailList: [],
				month: 1, 
				minNumber: 1, 
				maxNumber:'',
				order_id: "",
				isShow: false,
				loading: false,
				secondary_password: '',
				lastDate:'',
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		created() {
			this.getelEctDetail()
		},
		computed: {
			...mapState({
				wallet: state => state.user.wallet
			}),
			placeholder() {
				return [
					this.$t('pay.chargePass')
				]
			},
			electFeesAmount:function(){
				var dateTime = ''
				var nowTime1 = new Date().getTime();
				var dateTime1 = new Date(this.detailList.product_expires_at).getTime();
				var heyue = new Date(this.detailList.order_expirex_at)
				var heyue1 =  new Date(this.detailList.order_expirex_at).getTime()
				if(nowTime1>dateTime1){
					dateTime = new Date()
					dateTime = dateTime.setDate(dateTime.getDate()+ 7);
					dateTime = new Date(dateTime);
				}else{
				    dateTime = new Date(this.detailList.product_expires_at)
				}
				this.lastDate = getDateTime.addMonth(timeStr1,this.month);
				var threeMonthC = new Date(this.lastDate).getTime();
				var rangeDateNum = parseInt((threeMonthC-nowMonth2) / (1000*3600*24)); 
				var last = nowMonth - day + rangeDateNum
				if(threeMonthC == heyue1){
					last = 0
				}
				return Number(this.detailList.unit_price * this.detailList.once_consume * 24 * last * this.detailList.buy_shares).toFixed(2)
			}
		},
		methods: {
			getelEctDetail() {
				var time = Math.round(new Date().getTime() / 1000);
				var data = {
					id: this.id,
					time: time
				}
				electDetail(data).then(res => {
					if (res.code == 1000) {
						this.detailList = res.data
						this.month = Number(res.data.month)
						this.minNumber = Number(res.data.month)
					}
				})
			},
			submit() {
				if (this.month < this.detailList.month) {
					this.month = Number(this.detailList.month)
					uni.showToast()
				} else {
					this.isShow = !this.isShow
				}
			},
			onOrderPay() {
				var time = Math.round(new Date().getTime() / 1000);
				var data = {
					id: this.detailList.id,
					month: this.month,
					secondary_password: this.secondary_password,
					time: time
				}
				if (!this.secondary_password) {
					uni.showModal({
						title: this.$t('info.reminder'),
						content: this.$t('pay.chargePassPlace'),
						showCancel: false
					});
					return false;
				}
				uni.showLoading({
					title: this.$t('shop.paying') 
				});
				electPay(data).then(res => {
					if (res.code == 1000) {
						uni.hideLoading();
						this.$store.dispatch('getBalanceAction');
						this.isShow = false
						this.loading = false;
						uni.navigateTo({
							url: '/pages/my/currency-subsidiary/index?type=0'
						})
					}
				}).catch(() => {
					this.loading = false;
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		width: 100%;
		min-height: 100vh;
		background: #F7F8FCFF;
	}

	.order {
		padding: 32rpx;

		.orderMsg {
			padding: 32rpx;
			background: #fff;
			font-size: 24rpx;
			color: #61636FB2;
			margin-bottom: 24rpx;

			.item {
				margin-bottom: 24rpx;
				&:last-child{
					margin-bottom: 0;
				}
			}
		}

		.orderFees {
			padding: 32rpx 32rpx 0;
			background: #fff;
			font-size: 24rpx;
			color: #262628;

			.item {
				margin-bottom: 40rpx;
				align-items: center;

				.text {
					color: #E42C2CFF;
				}

				&:last-child {
					padding: 24rpx 0;
					border-top: 1px solid #eee;
				}
			}
		}

		.fixedBtm {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			background: #fff;
			z-index: 5;

			.content {
				align-items: center;
				height: 100%;

				.left {
					display: flex;
					align-items: flex-end;
					font-size: 32rpx;
					padding: 0 32rpx;

					.black {
						font-size: 24rpx;
						color: #000;
					}

					.gray {
						color: #BBB;
					}

					.price {
						color: #E4A25CFF;
					}
				}

				.btn {
					padding: 0 50rpx;
					height: 100%;
					background: #E4A25CFF;
					display: flex;
					align-items: center;
					color: #fff;
				}
			}
		}
	}

	.pop {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .3);
		z-index: 6;

		.content {
			width: 80%;
			padding: 32rpx;
			background: #fff;
			// height: 400rpx;
			border-radius: 40rpx;
			margin: 50% auto 0;

			.title {
				font-size: 36rpx;
				color: #262628FF;
				text-align: center;
				position: relative;
			}

			.close {
				position: absolute;
				right: 30rpx;
				top: 5rpx;
				color: #262628FF;

				img {
					width: 28rpx;
				}
			}
		}
	}

	.pay {
		.pay-title {
			display: block;
			padding: 32rpx 0;
			font-size: 32rpx;
			color: rgba(203, 203, 203, 1);
			margin-top: 20rpx;
		}

		&-item {
			padding: 0 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.label-wrap {
				display: flex;
				align-items: center;

				image {
					width: 36rpx;
					height: 36rpx;
					display: inline-block;
					margin-right: 10rpx;
					vertical-align: middle;
				}
			}

			.label {
				display: inline-block;
				margin-left: 6rpx;
				font-size: 24rpx;
				color: rgba(228, 162, 92, 1);
			}

			.check {
				color: rgba(228, 162, 92, 1);
			}

			.usdt {
				color: #42b983;
			}

			.cny {
				font-size: 36rpx;
				color: #c73a64;
			}

			.radio {
				transform: scale(0.7);
			}
		}
	}

	.buttonBg {
		width: 320rpx;
		height: 80rpx;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		margin: auto;
		background: rgba(228, 162, 92, 1);
		color: #fff;
	}

	.amountp {
		color: rgba(97, 99, 111, 1);
		font-size: 24rpx;
		text-align: center;
		padding-top: 40rpx;
	}
</style>
